<template>
  <div>
      <div :style="{backgroundColor:comBackgroundColor(isGuestUser)}">
          <div class="activecolor"  style="width:100px;height:30px;position:relative;" >
            <div style="color:#fff;" class="data"></div>
            <div class="data" v-if="comFontColor(isGuestUser)" style="z-index:2;paddingLeft:10px;color:#e60000">{{isGuestUser}}</div>
            <div class="data"  v-else   style="z-index:2;paddingLeft:10px;color:#00cc00">{{isGuestUser}}</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  computed: {
    isGuestUser () {
      if (this.$data.data.isGuestUser === true) {
        return 'True'
      } else {
        return 'False'
      }
    }
  },
  methods: {
    comBackgroundColor (isGuestUser) {
      if (isGuestUser === 'True') {
        return '#FFEBE5'
      }
      return '#E3FCEF'
    },
    comFontColor (isGuestUser) {
      if (isGuestUser === 'True') {
        return true
      }
      return false
    }
  }

}
</script>
<style>
.data {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
